<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/static/include/topLess.jsp"%>

 <script type="text/javascript" src="${ctx}/static/js/swfobject.js"></script>  
 <script type="text/javascript" src="${ctx}/static/js/jquery.uploadify.min.js"></script> 
 <link href="${ctx}/static/css/uploadify.css" rel="stylesheet" type="text/css" /> 
 
 <style>
<!--
#showPic{
	position:absolute; width:350px; height:350px; border: solid 1px orange;
}
-->
</style>
 
<body>

<div>
	<div style="float:left; width:420px; height:500px">
		<form action="${ctx}/unit/uploadPic/${unitId}" method="post" target="_blank" name="fileSubmitAction" id="fileSubmitAction" enctype="multipart/form-data">
		<input type="hidden" value="${unitId}" name="unitId">
		<div id="upDiv" class="padding5">
			 <table style="width: 90%;">  
		            <tr>  
		                <td style="width: 100px;">  
		                    <input type="file" name="uploadify" id="uploadify" /> 
		                </td>  
		                <td align="center">  
		                    <a class="tab_but" href="javascript:jQuery('#uploadify').uploadify('upload','*');">批量上传</a> 
		                    <a class="tab_but" href="javascript:jQuery('#uploadify').uploadify('cancel','*');">取消上传</a>  
						     <span id="result" style="font-size: 13px;color: red">${msg } </span>  
		                </td>  
		            </tr>  
		        </table>  
		        <div id="fileQueue" style="width: 400px;border: 2px solid green;"></div>
		</div>	
	</div>
	<div style="float:left; border: solid 1px #999;height:500px">
	</div>
	<div style="float:left; width:350px; height:500px">
		<div style="overflow:auto; height:450px">
			<table>
				<thead><th>已上传文件列表：</th></thead>
				<tbody id="picList">
				</tbody>
			</table>
		</div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function() {

	showPicList();
	
    $("#uploadify").uploadify({  
        'swf'       : '${ctx}/static/js/uploadify.swf',  
        'uploader'         : '${ctx}/unit/uploadPic/${unitId}',  
        'fileObjName'   :  'uploadFile',
        'queueID'        : 'fileQueue',  
        'auto'           : false,  
        'multi'          : true,
        'removeCompleted' : true,
        'buttonText'   :  '选择图片',
        'uploadLimit' : 50,  
        'fileTypeExts'        : '*.gif;*.jpg',  
        'fileTypeDesc'       : '图片文件',  
        'onQueueComplete'  :function(event,data) {  
        	showPicList();	//更新已上传列表
            $('#result').html(data.uploadsSuccessful +'个图片上传成功');  
        }, 
        'onUploadSuccess'  :function(file,data,response)
        {
        	$('#' + file.id).find('.data').html('-'+data);
        }
    });  
});

function showPicList(){
	$.getJSON("${baseURL}/unit/queryUnitPic/${unitId}", function(msg){
		$("#picList").empty();
		$.each(msg, function(i, pic){
			$("#picList").append("<tr id='" + pic.id + "'><td><img width='50px' height='50px' src='${baseURL}/unit/showUnitPic/" + pic.id + "'>"
					+ pic.picPath + "<a href='#' onclick='delPic(this)'>&nbsp;删除</a></td></tr>");
		});
		$.each($("#picList tr"), function(i, obj){			
			$(obj).hover(function(event){
				showPic($(this).attr("id"), event);
			}, hideScreen).mousemove(positionScreen);
		});
	});		
}

function showPic(id, event){
	var div = document.createElement("div");
	div.id = "showPic";
	var img = $("<img src='${baseURL}/unit/showUnitPic/" + id + "'>");
	$(img).css({width:'350px', height:'350px'});
	$(div).html(img);
	document.body.appendChild(div);
	positionScreen(event);
}

function delPic(obj){
	var id = $(obj.parentElement.parentElement).attr("id");
	layer.confirm("您确定要删除选中的图片吗？", function(){
		$.getJSON("${baseURL}/unit/delUnitPic/" + id, function(msg){
			if (msg=="success"){
				layer.msg("删除成功！", 1, 1, function(){
					$("#"+id).empty();
				});
			}else{
				layer.msg("删除失败！", 1);
			}
		});
	});
}

var positionScreen = function(event){
    var tPosX = event.pageX - 5; 
    var tPosY = event.pageY + 20; 
    $('#showPic').css({top:100, left:50}).fadeIn("slow");
};
var hideScreen = function(){
     $('#showPic').remove();
};
</script>
</form>
<%@ include file="/static/include/bottom.jsp"%>